<template>
	<view class="content">
		<view class="title" @click="test()">汇率转换器</view>
		<view class="describ">汇率每日更新，支持30多个国家和地区的货币</view>
		<view class="box-exchange">
			<view class="local-money-box">
				<view style="height: 24px;"></view>
				<view class="box-name">本币</view>
				<view class="money-box">
					<view class="money-item" @click="toMoneyList()">
						
						<image class="flag" mode="aspectFill" :src="localFlag"/>
						<view class="money-code">{{ localMoneyName }}</view>
						<image style="width: 11px;height: 8px;" src="/static/Vector.svg" />
					</view>
					<view class="input-box">
						<view v-show="isInput">{{ localMoney }}&nbsp&nbsp</view>
						<input
						
						v-model="localMoney"
						
						@facus="isInput=false"
						@blur="isInput=true"
						type="digit"
						class="hidden-input"
						 />
					</view>
				</view>
			</view>
			<!--这里是交换按键的思路，把hr线分成两段-->
			<view class="exchange-box">
				<view class="diy-hr"></view>
				<view @click="exchengeButton()" class="exchenge-button">
					<image class="exchange"src="/static/exchange.svg"/>
				</view>
				<view class="diy-hr"></view>
			</view>
			<view class="foreign-money-box">
				<view class="box-name">外币</view>
				<view class="money-box">
					<view class="money-item" @click="toMoneyList2()">
						<image class="flag" mode="aspectFill" :src="foreignFlag"/>
						<view class="money-code">{{ foreignMoneyName }}</view>
						<image style="width: 11px;height: 8px;" src="/static/Vector.svg"/>
					</view>
					<view class="input-box">{{ foreignMoney }}&nbsp&nbsp
						<input hidden>
					</view>
				</view>
			</view>
			<view style="height: 24px;"></view>
			
		</view>
		<view style="height: 36px;"></view>
		<view class="rate-post">
			<view class="post-time">汇率更新于 2024年12月11日 15:40</view>
			<view style="height: 12px;"></view>
			<view class="rate-display">{{}} 新加坡元 = {{}} 美元</view>
		</view>
	</view>
	
</template>
<script setup lang="ts">
//设计构思：
//1、进入小程序后向API请求汇率，并将汇率储存在变量中
//2、第一次进入小程序，默认显示人民币兑美元
//3、当用户选择本币后，货币数量显示100.00元，同时计算并显示外币的数量
//4、用户输入货币数量，同步计算外币数量(watch)
import {ref,watch,onMounted,computed} from 'vue';
import { useMoneyListStore } from '../../stores/MoneyList';
//引入index
const moneyList = useMoneyListStore()
console.log('000000',moneyList.index);

//选择本币外币的功能，经过测试决定在本页完成，不参与传参
const isInput = ref(true)
function toMoneyList(){
	isLocal.value = true
	uni.navigateTo({
 // 跳转的页面路径及参数
		url:'/pages/MoneyList?type=local'
});
}
function toMoneyList2(){
	isLocal.value = false
	uni.navigateTo({
 // 跳转的页面路径及参数
		url:'/pages/MoneyList?type=foreign'
});
}
function test(){
	console.log('000000',moneyList.index);
currentIndexLocal.value=4
}
//向接口请求数据

//当前的货币数量
const localMoney = ref(100)
const foreignMoney = ref()



interface rateInfo{
	name:string,
	rate:number,
	flag:string,
	chName:string
	}
    // 定义一个 ref 类型的数据

let rateList=ref<rateInfo[]>([
	{name:'USD',rate:1,flag:'/static/USD.png',chName:'美元'},
	{name:'CNY',rate:7.2560,flag:'/static/CNY.png',chName:'人民币'},
	{name:'SGD',rate:1.3410,flag:'/static/SGD.png',chName:'新加坡元'},
	{name:'JPY',rate:151.7756,flag:'/static/JPY.png',chName:'日元'},
	{name:'EUR',rate:0.9497,flag:'/static/EUR.png',chName:'欧元'}
])

//页面显示数据
const currentIndexLocal= ref(1);
const currentIndexForeign= ref(4);
//根据传回的index修改页面显示的数据,判断是否修改和如何修改
watch(moneyList,(newValue)=>{
	changeMoney()
	computeMoney(localMoney.value)
})


function changeMoney(){
	
	if(moneyList.index>=0){//如果改变了，默认值是-1
		if(isLocal.value===true){//是本币
			currentIndexLocal.value = moneyList.index
			console.log('indexhhh',currentIndexLocal.value);
			
		}else{
			currentIndexForeign.value = moneyList.index
		}
	}
	
}
//本币
const 	localMoneyName= computed(()=>rateList.value[currentIndexLocal.value].name)
const	localRate = computed(()=>rateList.value[currentIndexLocal.value].rate)
const	localFlag = computed(()=>rateList.value[currentIndexLocal.value].flag)
//外币
const	foreignMoneyName= computed(()=>rateList.value[currentIndexForeign.value].name)
const	foreignRate = computed(()=>rateList.value[currentIndexForeign.value].rate)
const	foreignFlag = computed(()=>rateList.value[currentIndexForeign.value].flag)
//改变上下两个货币的位置
function exchengeButton(){
	const change = currentIndexLocal.value
	currentIndexLocal.value=currentIndexForeign.value
	currentIndexForeign.value=change
	computeMoney(localMoney.value)
}
//选择的钱币
const isLocal = ref()
//计算屏幕应显示的货币量


//全部删除后，输入框显示0

watch(localMoney, (newValue) => {
    console.log(newValue);
//计算外币量
computeMoney(newValue)

	
});
onMounted(()=>{
	computeMoney(localMoney.value)
}
)
function computeMoney(inputValue){
	foreignMoney.value = (inputValue*foreignRate.value/localRate.value).toFixed(2)
	console.log(foreignMoney.value);
}


function getApp() {
	throw new Error('Function not implemented.');
}
</script>
<style>

.title{
	margin-top: 90px;
	font-size: 28px;
	justify-content: center;
	display: flex;
	color: #1F2261;
	font-weight: 600;
}
.describ{
	font-size: 16px;
	font-weight: 300;
	color: #808080;

	margin-top: 20px;
	margin-left: 24px;
	margin-right: 24px;
	
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
.box-exchange{
	background-color: #ffffff;
	
	margin-left: 24px;
	margin-right: 24px;
	margin-top: 50px;

	box-shadow: 4px 4px 10px 10px #0000000D;
	border-radius: 20px;

	display: flex;
	flex-direction: column;

}
.box-name{
	color: #989898;
	margin-left: 24px;
	margin-bottom: 18px;

}
.flag{
	width: 45px;
	height: 45px;
	border-radius: 50%;
	overflow: hidden; 
}
.money-code{
	color: #26278D;
	font-weight: 500;
	font-size: 24px;
}
.input-box{
	width: 141px;
	height: 45px;
	background-color: #EFEFEF;
	border-radius: 7px;
	margin-right: 24px;
}
.money-box{
	display: flex;
	justify-content: space-between;
	align-items: center;

}
.money-item{

	margin-left: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 123px;
}
.local-money-box{
	width: 100%;
}
.diy-hr{
    background: #E0E3DA;
    height: 2rpx;
	width: 38%
}
.exchenge-button{
	
	width: 44px;
	height: 44px;
	background-color: #26278D;
	border-radius: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
}
.exchange{
	width: 15px;
	height: 20px;
}
.exchange-box{
	margin-top: 12px;
	margin-bottom: 12px;
	display: flex;
	flex-direction:row;
	justify-content: center;
	align-items: center;
}
.rate-post{
	margin-left: 24px;
}
.post-time{
	color: #A1A1A1;
	font-size: 16px;
	font-weight: 400;
}
.rate-display{
	font-size: 18px;
	font-weight: 500;
}
.input-box{
	display: flex;
	align-items: center;
	justify-content: flex-end;

	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
}
.hidden-input{
	width: 140px;
	height: 45px;
	opacity:0;
	position: absolute;

	text-align: right;
	margin-right: 12px;
	color: transparent;
}
.flag img{
	width: 100%; /* 让图片适应容器 */
  height: 100%;
  object-fit: cover; 
}
</style>
